<template>
	<view>
		<view style="display: flex;flex-direction: row;width: 100%;position: fixed;left: 0;top: 0;background-color: #fff;">
			<view class="search_bar">
				<image style="margin-left: 30rpx;height: 40rpx;width: 40rpx;" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/search.png"></image>
				<input v-model="form.searchValue" @confirm="searchEvent"  confirm-type='search' placeholder="搜索商品" placeholder-style="color:#2D3130" class="search_input" />
			</view>
			<view @click="cancelEvent" class="btn_cancel">取消</view>
		</view>
		<view style="height: 128rpx;"></view>
		<view class="wares-card-container">
			<block v-for="(item,index) in MallList" :key="index">
			<navigator  :url="'/pages/mall/productDetail?id='+item.id" hover-class="none">
			  <view class="goods">
			    <image style="background-color: #eaeaea;width: 100%;height:346rpx;border-top-left-radius: 16rpx;border-top-right-radius: 16rpx;" :src="item.coverAbsolute"></image>
			    <view class="good-info">{{item.name}}</view>
			    <view class="price">
			      <text style="font-weight: 600;font-size: 36rpx; color: #FC5252;"><text style="font-size: 24rpx;">￥</text>{{item.goodsMinPrice}}</text>
			    </view>
			  </view>
			</navigator>
			</block>
			<u-loadmore v-if="more"
			:status="status"
			loadingText="加载中"
			loadmoreText="上拉加载更多"
			nomoreText="已经到底啦～"
			fontSize=28
			iconSize=30
			marginTop=20
			marginBottom=30
			></u-loadmore>
		</view>
		<view v-if="mallfalse" style="display: flex;flex-direction: column;align-items: center;width: 100%;">
			<image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/comments_null.png" style="margin-top: 136rpx;width: 316rpx;height: 316rpx;"></image>
			<label style="margin-top: 20rpx;color: #272A37;font-size: 32rpx;">未搜索到相关数据</label>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				more: false,
				form: {
					searchValue: '',
					pageNum:1,
					pageSize:20,
					orderByColumn:'order_num desc,create_time',
					isAsc:'ascending'
				},
				MallList: [],
        mallfalse:false
			}
		},
		onReachBottom() {
			  if (this.more == false) return
			  this.status = 'loading'
			  this.form.pageNum = ++ this.form.pageNum
			  this.getMall(false)
		},
		onLoad() {
		    // this.getMall(true)
		},
		onPullDownRefresh() {
			this.getMall(true)
		},
		methods: {
			searchEvent() {
				this.getMall(true)
			},
			cancelEvent() {
				this.MallList=[]
				uni.hideKeyboard()
				this.form.searchValue = ''
				// this.getMall(true)
			},
			getMall(isFresh) {
				if (isFresh) {
					this.form.pageNum = 1
					this.form.pageSize = 20
				}
				this.request.httpTokenJsonRequest('/mp-api/wx/goods/list',this.form,'POST',false).then( res=> {
					uni.stopPullDownRefresh()
					if (res.code == 0) {
						if (res.data.list && isFresh) {
							this.MallList = res.data.list

						}else {
							res.data.list.forEach( item=> {
								this.MallList.push(item)
							})
						}
            if(this.MallList.length<=0){this.mallfalse=true}else{this.mallfalse=false}
						if (res.data.total > this.MallList.length) {
							this.status = 'loadmore'
							this.more = true
						}else {
							this.more = false
							this.status = 'nomore'
						}
					}else {
						this.more = false
						this.status = 'nomore'
					}
				})
			}
		}
	}
</script>

<style scoped>
	.search_bar {
		margin-left: 30rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		width: 604rpx;
		height: 88rpx;
		background: #F3F7F6;
		border-radius: 24rpx;
		border: 2rpx solid #234941;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.search_input {
		margin-left: 8rpx;
		width: calc(100% - 98rpx);
		font-size:28rpx ;
		color: #2D3130;
	}
	.btn_cancel {
		height: 88rpx;
		width: 110rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 28rpx;
		color: #2D3130;
		margin-top: 20rpx;
	}
</style>
